<template>
    <!-- 横向滚动 -->
    <scroll-view scroll-x class="wrapper">
        <view class="u-flex u-flex-nowrap">
            <view class="items stretch" v-for="(item, i) in list" :key="'mode-four' + item.id" :style="{ marginRight }">
                <column-item :data="item" :config="config"></column-item>
            </view>
        </view>
    </scroll-view>
</template>

<script lang="ts" setup>
import ColumnItem from '../column.vue'
import { inject, computed } from 'vue'

interface Props {
    list: Array<any>
    config: any
}

withDefaults(defineProps<Props>(), {
    list: () => [],
    config: () => ({})
})
const data = inject<any>('data')

let marginRight = computed(() => {
    return (data.style.marginRight || 0) + 'px'
})
</script>

<style lang="scss" scoped>
.items {
    width: 260rpx;
    flex-shrink: 0;
}
.items:last-child {
    margin-right: 0 !important;
}
.wrapper {
    white-space: nowrap;
}
.stretch {
    align-self: stretch;
}
</style>
